import React, { useRef } from 'react'

export default function UseRef() {

    //使用 useRef  来创建ref容器对象
    let input = useRef();
    let div = useRef();

    //创建方法获取数据
    let getValue = () => {
        // console.dir(input.current.value);
        //获取输入框的值
        let value = input.current.value;
        //展示数据
        div.current.innerHTML = value;
        //清空数据
        input.current.value = "";

    }

    return (
        <>
            <h1>学习 useRef   hook  </h1>
            <input ref={input} type="text" />
            <button onClick={getValue}>点击获取数据</button>
            <div ref={div} style={{ width: 300, height: 300, border: '1px solid red',wordBreak:"break-all" }}></div>
        </>
    )
}
